{% extends "authentication/base.html" %}
{% load static %}

{% block title %}设置{% endblock %}

{% block content %}
  <div class="card mt-3 mb-3" style="background-color: {% if low %}{{ low_color }}{% else %}#ffa0b1{% endif %};">
  <h5 class="card-header d-flex">
    <span class="me-auto">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-person-gear" viewBox="0 0 16 16">
        <path fill-rule="evenodd" d="M11 5a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM8 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"></path>
        <path d="M8.256 14a4.474 4.474 0 0 1-.229-1.004H3c.001-.246.154-.986.832-1.664C4.484 10.68 5.711 10 8 10c.26 0 .507.009.74.025.226-.341.496-.65.804-.918C9.077 9.038 8.564 9 8 9c-5 0-6 3-6 4s1 1 1 1h5.256Z"></path>
        <path fill-rule="evenodd" d="M11.886 9.46c.18-.613 1.048-.613 1.229 0l.043.148a.64.64 0 0 0 .921.382l.136-.074c.561-.306 1.175.308.87.869l-.075.136a.64.64 0 0 0 .382.92l.149.045c.612.18.612 1.048 0 1.229l-.15.043a.64.64 0 0 0-.38.921l.074.136c.305.561-.309 1.175-.87.87l-.136-.075a.64.64 0 0 0-.92.382l-.045.149c-.18.612-1.048.612-1.229 0l-.043-.15a.64.64 0 0 0-.921-.38l-.136.074c-.561.305-1.175-.309-.87-.87l.075-.136a.64.64 0 0 0-.382-.92l-.148-.045c-.613-.18-.613-1.048 0-1.229l.148-.043a.64.64 0 0 0 .382-.921l-.074-.136c-.306-.561.308-1.175.869-.87l.136.075a.64.64 0 0 0 .92-.382l.045-.148ZM14 12.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z"></path>
      </svg>
      设置
    </span>
    <span class="ms-auto">
      <a href="{% url 'main:index' %}" class="{% if low %}link-dark{% else %}link-light{% endif %} text-decoration-none" style="font-size: 15px;">
        <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="currentColor" class="bi bi-house" viewBox="0 0 16 16">
          <path fill-rule="evenodd" d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L2 8.207V13.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V8.207l.646.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.707 1.5ZM13 7.207l-5-5-5 5V13.5a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5V7.207Z"></path>
        </svg>
        返回主页
      </a>
    </span>
  </h5>
    <div class="card-body">
      <form action="{% url 'authentication:setting' %}" method="post" id="form" enctype="multipart/form-data">
        {% csrf_token %}
        <div class="form-floating mb-3">
          <input type="text" class="form-control {% if low %}text-bg-secondary{% else %}text-bg-danger{% endif %}" id="username" readonly
                 name="username" placeholder="username" value="{{ user.username }}">
          <label for="username">用户名</label>
        </div>
        <div class="form-floating mb-3">
          <input type="password" class="form-control {% if low %}text-bg-secondary{% else %}text-bg-danger{% endif %}" id="old-password"
                 name="old-password" placeholder="password" value="{{ old_password }}"
                 autofocus required>
          <label for="old-password">旧密码（必填）</label>
        </div>
        <div class="form-floating mb-3">
          <input type="password" class="form-control {% if low %}text-bg-secondary{% else %}text-bg-danger{% endif %}" id="password"
                 name="password" placeholder="password"  value="{{ password }}">
          <label for="password">新密码（若不修改留空）</label>
        </div>
        <div class="form-floating mb-3">
          <input type="password" class="form-control {% if low %}text-bg-secondary{% else %}text-bg-danger{% endif %}" id="password2"
                 name="password2" placeholder="password" value="{{ password2 }}">
          <label for="password2">确认新密码</label>
        </div>
        {% for error in errors %}
          <div class="alert alert-danger" role="alert">
          {{ error }}
          </div>
          {% empty %}
          {% if not done and not first %}
          <div class="alert alert-warning" role="alert">
          没有修改项！
          </div>
          {% endif %}
        {% endfor %}
        {% if done %}
          <div class="alert alert-info alert-dismissible fade show" role="alert">
          修改成功！
          <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
          </div>
        {% endif %}
        <div class="d-grid">
          <button type="submit" class="btn {% if low %}btn-secondary{% else %}btn-danger{% endif %}">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-person-gear" viewBox="0 0 16 16">
              <path fill-rule="evenodd" d="M11 5a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM8 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"></path>
              <path d="M8.256 14a4.474 4.474 0 0 1-.229-1.004H3c.001-.246.154-.986.832-1.664C4.484 10.68 5.711 10 8 10c.26 0 .507.009.74.025.226-.341.496-.65.804-.918C9.077 9.038 8.564 9 8 9c-5 0-6 3-6 4s1 1 1 1h5.256Z"></path>
              <path fill-rule="evenodd" d="M11.886 9.46c.18-.613 1.048-.613 1.229 0l.043.148a.64.64 0 0 0 .921.382l.136-.074c.561-.306 1.175.308.87.869l-.075.136a.64.64 0 0 0 .382.92l.149.045c.612.18.612 1.048 0 1.229l-.15.043a.64.64 0 0 0-.38.921l.074.136c.305.561-.309 1.175-.87.87l-.136-.075a.64.64 0 0 0-.92.382l-.045.149c-.18.612-1.048.612-1.229 0l-.043-.15a.64.64 0 0 0-.921-.38l-.136.074c-.561.305-1.175-.309-.87-.87l.075-.136a.64.64 0 0 0-.382-.92l-.148-.045c-.613-.18-.613-1.048 0-1.229l.148-.043a.64.64 0 0 0 .382-.921l-.074-.136c-.306-.561.308-1.175.869-.87l.136.075a.64.64 0 0 0 .92-.382l.045-.148ZM14 12.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z"></path>
            </svg>
            修改
          </button>
        </div>
      </form>
    </div>
  </div>
{% endblock %}